<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      充值
    </view>
    <view class="" style="padding-top: 88rpx">
      <view class="content">
        <view class="addCard" @click="open" v-if="show">
          <view class="lef">充值方式</view>
          <view class="righ">
            <view class="bankcard">
              <image
                v-if="active == 0"
                class="img wechatI"
                src="../../../static/wechat.png"
                mode=""
              />
              <text v-if="active == 0">微信</text>
              <image
                v-if="active == 1"
                class="img"
                src="../../../static/alipay.png"
                mode=""
              />
              <text v-if="active == 1">支付宝</text>
            </view>
            <image class="img" src="../../../static/x92.png" mode="" />
          </view>
        </view>
        <view class="box">
          <view class="title">
            <image class="img1" src="../../../static/dz1.png" mode="" />
            您的充值金额</view
          >
          <view class="inputs">
            <input
              type="number"
              v-model="money"
              placeholder="请输入您的充值金额"
            />
          </view>
        </view>
        <view class="btn" @click="Recharge">充值</view>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="boxs">
        <view class="selectPopup_one">
          <image
            src="../../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="close"
          ></image>
          <text style="margin: 0 auto">选择充值方式</text>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view class="pop_two" @click="changeActive(0)">
            <view class="left">
              <image class="img" src="../../../static/wechat.png" mode="" />
              <view class="col">
                <text>微信</text>
              </view>
            </view>
            <image
              v-if="active == 0"
              class="img"
              src="../../../static/ridos.png"
              mode=""
            />
            <image v-else class="img" src="../../../static/rido.png" mode="" />
          </view>
          <view class="pop_two" @click="changeActive(1)">
            <view class="left">
              <image class="img" src="../../../static/alipay.png" mode="" />
              <view class="col">
                <text>支付宝</text>
              </view>
            </view>
            <image
              v-if="active == 1"
              class="img"
              src="../../../static/ridos.png"
              mode=""
            />
            <image v-else class="img" src="../../../static/rido.png" mode="" />
          </view>
        </scroll-view>
        <!-- <view class="pbtn" @click="close">确定</view> -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      toView: "",
      active: 0,
      payment: "wx",
      money: "",
      show: true,
      Paylist: [],
      Wechatenvironment: true, // 微信内置打开，默认微信支付  false: h5打开，可以微信和支付宝支付
      ordercode: "", //订单号
    };
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
  },
  onShow() {
    this.isWechat();
  },
  methods: {
    gobackClick() {
      uni.navigateBack({});
    },

    // 判断是否在浏览器
    isWechat() {
      let en = window.navigator.userAgent.toLowerCase();
      if (en.match(/MicroMessenger/i) == "micromessenger") {
        // 微信内部打开默认微信支付 payment传空
        this.show = false;
        this.Wechatenvironment = true;
        this.payment = "";
      } else {
        this.show = true;
        this.Wechatenvironment = false;
        if (this.active == 0) {
          this.payment = "wx";
        } else if (this.active == 1) {
          this.payment = "zfb";
        }
      }
    },

    //选择支付方式
    changeActive(id) {
      this.active = id;
      this.$refs.popup.close();
      if (id == 0) {
        this.payment = "wx";
      } else if (id == 1) {
        this.payment = "zfb";
      }
    },

    // 充值下单
    async Recharge() {
      if (/^\s*$/g.test(this.money)) {
        uni.showToast({
          title: "请输入充值金额",
          icon: "none",
        });
        return;
      }
      let that = this;
      if (this.Wechatenvironment) {
        // 微信内部打开默认微信支付
        const res = await that.$myRequest({
          url: "user/recharge",
          method: "POST",
          data: {
            money: this.money,
          },
        });
        if (res.data.code == 1) {
          that.ordercode = res.data.data;
          const datas = await this.$myRequest({
            url: "pay/wx_pay",
            method: "POST",
            data: {
              order_sn: that.ordercode, //订单号
            },
          });
          if (datas.data.code == 1) {
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                appId: datas.data.data.appId, //公众号名称，由商户传入
                timeStamp: datas.data.data.timeStamp, //时间戳，自1970年以来的秒数
                nonceStr: datas.data.data.nonceStr, //随机串
                package: datas.data.data.package,
                signType: datas.data.data.signType, //微信签名方式：
                paySign: datas.data.data.paySign, //微信签名
              },
              function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
                  uni.request({
                    url: "https://www.123qifu.com/api/pay/weixin_getList",
                    method: "POST",
                    header: {
                      token: that.token,
                    },
                    data: {
                      order_sn: that.ordercode,
                    },
                    success: (res) => {
                      if (res.data.code == 1) {
                        uni.navigateTo({
                          url: "../payment/payment",
                        });
                      }
                    },
                  });
                }
              }
            );
          }
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
        }
        return;
      }
      if (this.payment == "zfb") {
        //  支付宝支付
        const ress = await this.$myRequest({
          url: "user/recharge",
          method: "POST",
          data: {
            money: this.money,
            payment: this.payment,
          },
        });
        this.content = ress.data;
        // 提交form表单
        document.querySelector("body").innerHTML = ress.data;
        document.forms[0].submit();
      } else {
        // 微信支付
        const ress = await this.$myRequest({
          url: "user/recharge",
          method: "POST",
          data: {
            money: this.money,
            payment: this.payment,
          },
        });
        let res = ress.data.data;
        if (res.return_msg === "OK") {
          // mweb_url是统一下单接口返回的链接

          // redirect_url就是支付成功后跳转的链接,需要encode后拼接到mweb_url后面,

          //如果不需要跳转则忽略redirect_url,不拼接
          //这样跳转后, mweb_url就会调起微信支付
          window.location.href =
            res.mweb_url +
            "&redirect_url=" +
            encodeURIComponent(
              this.$process == "development"
                ? "https://www.123qifu.com/internaltesting/#/pages/user/payment/payment"
                : "https://www.123qifu.com/wechatdemo/#/pages/user/payment/payment" // 正式环境
            );
        }
      }
    },

    open() {
      this.$refs.popup.open();
    },

    close() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  min-height: 100vh;
  position: relative;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  width: 100%;
  min-height: 60vh;
  box-sizing: border-box;
  padding: 30rpx;
  .addCard {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .lef {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
    }
    .righ {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #333;
      .bankcard {
        display: flex;
        align-items: center;
        color: #333333;
        font-weight: normal;
        .img {
          display: block;
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }
      }
      > .img {
        display: block;
        width: 12rpx;
        height: 20rpx;
        margin-left: 15rpx;
      }
    }
  }
  .sped {
    width: 100%;
    box-sizing: border-box;
    padding-right: 180rpx;
    text-align: right;
    font-size: 28rpx;
    color: #999999;
    margin-top: 10rpx;
  }
  .box {
    width: 100%;
    height: 286rpx;
    background: #ffffff;
    border-radius: 22rpx;
    overflow: hidden;
    .title {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 36rpx;
      margin-top: 70rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      .img1 {
        display: block;
        width: 26rpx;
        height: 26rpx;
        margin-right: 15rpx;
      }
    }
    .inputs {
      width: 590rpx;
      border-bottom: 1px solid #eee;
      padding: 0 0 15rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 35rpx auto;
      input {
        flex: 1;
        box-sizing: border-box;
        padding: 0 20rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #333;
      }
    }
  }
  .btn {
    width: 250rpx;
    height: 66rpx;
    background: #c52b2e;
    border-radius: 33px;
    text-align: center;
    line-height: 66rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 100rpx auto;
  }
}
.boxs {
  width: 100%;
  height: 500rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #eee;
    .clos {
      width: 24rpx;
      position: relative;
      left: 30rpx;
    }
  }
  .pop_two {
    width: 690rpx;
    height: 100rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    .left {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      .col {
        text {
          display: block;
        }
      }
    }
    > .img {
      display: block;
      width: 34rpx;
      height: 34rpx;
    }
  }
  .pop_two:nth-child(2) {
    border-bottom: none;
  }
  .pbtn {
    width: 300rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #c52b2e;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 70rpx auto 0;
  }
}
</style>
